<html>
    <head>
        <meta charset='utf-8'>
        <title>Keep Account</title>
        <link rel="stylesheet" type="text/css" href="res/common.css" /> 
        <style>
            .one_input_layout {
                width: 320px; height: 25px; float: left;
                margin-top: 8px; margin-bottom: 8px;
            }
            .one_line_layout { width: 720px; height: 30px; clear:both;}
            .input_line_element { 
                float: left;
                width: 156px; 
                height: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            .datata{
                width: 150px;
                color: blue;
                margin-bottom: 10px;
            }
            #property_brief_area{
                margin-top: 20px;
                margin-bottom: 10px;
                padding-top: 10px;
            }
            #commit_button { margin-top : 16px; margin-left : 16px; }
        </style>
        <script type="text/javascript" src="res/common.js"></script>
        <script type="text/javascript" src="/res/SimpleTable.js"></script>
    </head>
    <body>
        <div id="navi_bar">
        </div>
        <div id="in_out_area">
            <table border="1">
                <tr><th></th><th>Income</th><th>Payment</th><th>Budget Left</th></tr>
                <tr><td>Day</td><td id="day_income_val"></td><td id="day_payment_val"></td><td>N/A</td></tr>
                <tr><td>Month</td><td id="month_income_val"></td><td id="month_payment_val"></td><td id="month_budget_left_val"></td></tr>
                <tr><td>Year</td><td id="year_income_val"></td><td id="year_payment_val"></td><td id="year_budget_left_val"></td></tr>
            </table>
        </div>
        <div id="property_brief_area">
        </div>
    </body>
    <script>
        function onDayIncomeAndPaymentReceive(result) {
            result = JSON.parse(result);
            var income = result.data.income;
            var payment = result.data.payment;
            document.getElementById('day_income_val').innerHTML = income;
            document.getElementById('day_payment_val').innerHTML = payment;
        }

        function onMonthIncomeAndPaymentReceive(result) {
            result = JSON.parse(result);
            var income = result.data.income;
            var payment = result.data.payment;
            document.getElementById('month_income_val').innerHTML = income;
            document.getElementById('month_payment_val').innerHTML = payment;
        }

        function onYearIncomeAndPaymentReceive(result) {
            result = JSON.parse(result);
            var income = result.data.income;
            var payment = result.data.payment;
            document.getElementById('year_income_val').innerHTML = income;
            document.getElementById('year_payment_val').innerHTML = payment;
        }

        function onBudgetReceive(result) {
            result = JSON.parse(result);
            var month_left = result.data.all_cat1s_info.month_left;
            var year_left = result.data.all_cat1s_info.year_left;
            document.getElementById('month_budget_left_val').innerHTML = month_left;
            document.getElementById('year_budget_left_val').innerHTML = year_left;
        }
        function onAccountBriefReceive(result) {
            var table = new SimpleTable('property_brief_table', 'property_brief_area');
            table.setHeader(['Currency', 'Account', 'Balance']);
            result = JSON.parse(result);
            var data = result.data;
            data.forEach(function(crc_info) {
                var row_count = crc_info.acnt_info.length;
                if(row_count == 0) {
                    console.log('data format is not correct' + crc_info);
                    return;
                }
                // 先添加一個幣種的第一個賬戶
                table.addRow([{'text':crc_info.crc_nameme, 'rowspan':row_count+1}, crc_info.acnt_info[0].acnt_nameme, crc_info.acnt_info[0].acnt_balance]);
                // 再添加該幣種剩餘的賬戶
                for(var i = 1; i < row_count; i++) {
                    table.addRow([null, crc_info.acnt_info[i].acnt_nameme, crc_info.acnt_info[i].acnt_balance]);
                }
                // 最後添加幣種的所有賬戶的總合
                table.addRow([null, 'Total', crc_info.total_balance]);
            });
            table.show();
        }

        genNavBar('home');
        var currentDateStr = getCurrentDateTimeString(0, true);
        var dayInOutURI = '/service/statistic/getDefaultCurrencyIncomeAndPayment?time=' + currentDateStr + '&time_interval=day'
        var monthInOutURI = '/service/statistic/getDefaultCurrencyIncomeAndPayment?time=' + currentDateStr + '&time_interval=month'
        var yearInOutURI = '/service/statistic/getDefaultCurrencyIncomeAndPayment?time=' + currentDateStr + '&time_interval=year'
        var accountBriefURI = '/service/statistic/getPropertyBreif'
        var budgetURI = '/service/budget/getCurrentPlanAndUsage'
        getUrlAsyn(dayInOutURI, onDayIncomeAndPaymentReceive);
        getUrlAsyn(monthInOutURI, onMonthIncomeAndPaymentReceive);
        getUrlAsyn(yearInOutURI, onYearIncomeAndPaymentReceive);
        getUrlAsyn(accountBriefURI, onAccountBriefReceive);
        getUrlAsyn(budgetURI, onBudgetReceive);

    </script>
</html>